<template>
  <transition name="bounce" mode="out-in">
    <section class="mui-content pd">
      <mh-header headName="我的礼物"> </mh-header>
      <div class="mui-segmented-control mh-segmented">
        <a @click='getType(1)' class="mui-control-item mui-active"><span>我收到的({{getLen}})</span></a>
        <a @click='getType(2)' class="mui-control-item"><span>我送出的({{sendLen}})</span></a>
      </div>
      <div class="gift-list bg-w">
        <div class="item flex-bt mh-pd" v-for="item in gifts" :key="item.id">
          <div class="giver flex">
            <div class="giver-l">
              <div class="pic-box">
                <img :src="item.portrait" alt="头像">
              </div>
            </div>
            <div class="giver-r">
              <p class="u-name" v-text="item.nickname">用户名</p>
              <p class="u-age">{{item.age}}岁 {{item.education}}</p>
            </div>
          </div>
          <span class="g-name" v-text="item.gift_name">-</span>
          <span class="g-num" v-text="item.num">-</span>
          <span class="g-time" v-text="item.time">-</span>
        </div>
      </div>
    </section>
  </transition>
</template>

<script>
  import MhHeader from '@/components/mh-header/mh-header';
  import {MH_API} from "@/api/api";
  export default {
    name: "my-gift",
    data () {
      return {
        gifts: [
          // {
          //   id: '1',
          //   user: {
          //     pic: 'https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=1713526531,3850193221&fm=26&gp=0.jpg',
          //     name: '张小八',
          //     age: 23,
          //     edu: '本科'
          //   },
          //   giftName: '玫瑰',
          //   num: '2束',
          //   time: '05.14'
          // },
          // {
          //   id: '2',
          //   user: {
          //     pic: 'https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=1713526531,3850193221&fm=26&gp=0.jpg',
          //     name: '张小八',
          //     age: 23,
          //     edu: '本科'
          //   },
          //   giftName: '玫瑰',
          //   num: '2束',
          //   time: '05.14'
          // },
          // {
          //   id: '3',
          //   user: {
          //     pic: 'https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=1713526531,3850193221&fm=26&gp=0.jpg',
          //     name: '张小八',
          //     age: 23,
          //     edu: '本科'
          //   },
          //   giftName: '玫瑰',
          //   num: '2束',
          //   time: '05.14'
          // }
        ],
        getLen: 0,
        getArr: [],
        sendLen: 0,
        sendArr: [],
      }
    },
    components: {
      MhHeader
    },
    methods: {
      getType(type){
        console.log(type)
        if(type==1){
          this.gifts = this.getArr
        }
        else{
          this.gifts = this.sendArr
        }
      }
    },
    created(){
      console.log(123456)
      let self = this;
      MH_API.getGift({
        type: 1
      }).then(res => {
        if (res.status === 200) {
          self.getLen = res.data ? res.data.length : 0;
          self.getArr = res.data;
          self.gifts = res.data;
        }
      });
      MH_API.getGift({
        type: 2
      }).then(res => {
        if (res.status === 200) {
          self.sendLen = res.data ? res.data.length : 0;
          self.sendArr = res.data;
        }
      });
    }
  }
</script>

<style lang="scss" scoped>
  @import "../../assets/css/mixin";
  .pic-box {
    background-color: #eeeeee;
    @include mh-avatar-box(3.4rem, 3.4rem)
  }
  .gift-list {
    .item {
      border-bottom: 1px solid #eee;
    }
  }
  .giver-r {
    margin-left: 1rem;
    .u-name {@include sc(1.4rem, #333);}
    .u-age {@include sc(1.2rem, #666);}
  }
  .g-name {@include sc(1.4rem, #f26c60);}
  .g-num {@include sc(1.4rem, #666);}
  .g-time {@include sc(1.4rem, #666);}

</style>
